import { NavLink, Outlet } from 'react-router-dom';
import './Index.scss'
const Index = () => {
    // search 取值
    // const [ searchParams ] = useSearchParams()
    // console.log('==获取路由携带的参数=', searchParams.get('token'), 
    // searchParams.get('id'),
    // searchParams.getAll('name'))
    // pararms-取值
    // const { id, abc } = useParams()
    // console.log('params-obj', id, abc)
    // TODO
    // state 取值
    // const location = useLocation()
    // console.log('location', location)


    return (
        <>
            <h2>13.4 Hooks Router</h2>
            <h3>13.4.1 useRoutes-几种管理路由</h3>
            <h3>13.4.2 useNavigate-编程式导航</h3>
            <h3>13.4.3 路由跳转携带参数和获取参数</h3>
            <pre>
                1. search 传参
                2. params 传参
                3. state传参
            </pre>
            <section className='section'>

                <aside className='left'>
                    <NavLink to='/demo01Router/home'>首页</NavLink>&nbsp;|
                    <NavLink to='/demo01Router/visitorList'>访客列表</NavLink>&nbsp;|
                    <NavLink to='/demo01Router/visitorAdd'>访客添加修改</NavLink>&nbsp;
                </aside>
                <section className='right'>
                    右侧内容
                    <Outlet></Outlet>
                </section>
            </section>
        </>
    );
}

export default Index;